<template>
    <FlexContainer>
        <template slot="leftWrapper">
            <ElementTree 
                ref="elementTree"
                treeSign="japanModel" 
                default-expand-all
                checkMode="nocheck"
                @node-click="handlePageTreeClick"
                @node-check="handlePageTreeCheck"
                @mounted="handlePageTreeMounted">
            </ElementTree>
        </template>

        <template slot="rightTop">
            <el-descriptions title="节点信息" style="padding: 10px 0;">
                <el-descriptions-item label="名称">{{ pageTree.activeSelect.name }}</el-descriptions-item>
                <el-descriptions-item label="ID">{{ pageTree.activeSelect.id }}</el-descriptions-item>
                <el-descriptions-item label="车系">{{ pageTree.activeSelect.node_parent_name }}</el-descriptions-item>
                <el-descriptions-item label="图标">{{ pageTree.activeSelect.icon }}</el-descriptions-item>
                <el-descriptions-item label="模拟数据">XX省 XX市 XX区 XX街道 XX园区 XX栋 XX楼 XX号</el-descriptions-item>
            </el-descriptions>
        </template>

        <template slot="rightBottom">
            <TableAutomaticNew
                ref="aviationtable" 
                :checkedField="checkedField"
                :manageColumn="manageColumn"
                :preColumns="preColumns" 
                :pagesize.sync="pagesize" 
                :page.sync="page" 
                :total="total" 
                :pinned="pinned"
                :gridTag="gridTag" 
                exportIcon="airplane/material/export" 
                :fieldConfig="pageTable.fieldConfig" 
                :tableData="pageTable.tableData" 
                @pagination="handleGetTableListByParams()" 
                @modify="handleTableRowAddEvent(arguments[0], true)"
                @remove="handleTableRowRemoveEvent"
                >
                <template slot="query">
                    <TableSearchForm
                        ref="tablesearchform"
                        :leftBtnGroup="queryForm.leftBtnGroup"
                        :openSearchProps="queryForm.openSearchProps"
                        :hideSearchProps="queryForm.hideSearchProps"
                        :searchpanel="queryForm.searchpanel"
                        @search="handleGetTableListByParams">
                    </TableSearchForm>
                </template>
                <template slot="pageLeft">
                    <el-button type="primary">批量删除</el-button>
                </template>
            </TableAutomaticNew>
        </template>

        <SimpleDialogForm
            ref="simpledialogform"
            :visible.sync="pageDialog.visible"
            :dialogRules="pageDialog.dialogRules"
            :dialogFormProps="pageDialog.dialogFormProps"
            :dialogData="pageDialog.activeData">
        </SimpleDialogForm>

    </FlexContainer>
</template>
<script>
    // 布局组件
    import FlexContainer from '@/components/Layout/FlexContainer.vue';

    // 建议表单弹框
    import SimpleDialogForm from '@/components/SimpleDialogForm/SimpleDialogForm.vue'

    // element tree 改！utral pro max 
    import { ElementTree } from '@/components/ElementTree';

    // 表格组件
    import {
        TableAutomaticNew,
        TableSearchForm,
        singletable
    } from '@/components/ElementTable'

    // 表格固定字段
    import {
        getTableDataList,
        getTableFieldConfig,
        dialogFormConfig
    } from './components/fieldConfig'
    import moment from 'moment';

    export default {
        name: 'TreeAndTable',
        components: { 
            FlexContainer, TableAutomaticNew, 
            TableSearchForm, ElementTree,
            SimpleDialogForm
        },
        props: {},
        mixins: [singletable],
        data() {
            return {
                queryForm: {
                    // 按钮操作
                    leftBtnGroup: [
                        {
                            name: '新增',
                            onClick: () => this.handleAddEvent()
                        },
                        {
                            name: '导入',
                            onClick: () => this.handleImportEvent()
                        }
                    ],
                    
                    // 可视查询条件
                    openSearchProps: [
                        {
                            type: 'input',
                            name: '输入条件',
                            key: 'input_data',
                        },
                        {
                            type: 'select',
                            name: '选择条件',
                            key: 'select_data',
                            defaultValue: '0',
                            selectList: [
                                { name: '全部', key: '0' },
                                { name: '类型A', key: '1' },
                                { name: '类型B', key: '2' }
                            ],
                            onChange: (row) => this.hanleSelectChange(row)
                        },
                    ],
                    
                    // 隐藏查询条件
                    hideSearchProps: [
                        {
                            type: 'input',
                            name: '隐藏条件',
                            key: 'hide_data1'
                        },
                        {
                            type: 'input',
                            name: '隐藏条件',
                            key: 'hide_data2'
                        },
                        {
                            type: 'input',
                            name: '隐藏条件',
                            key: 'hide_data3'
                        },
                    ],
                    
                    // 右上角 C 位查询
                    searchpanel: {
                        placeholder: '请输入右上角关键字',
                        type: 'input',
                        key: 'lock_data',
                    }
                },

                gridTag: 'onlyTable',

                // 页面表格
                pageTable: {
                    // 表格数据
                    tableData: [],

                    // 表格字段
                    fieldConfig: getTableFieldConfig(10)
                },


                // elementTree
                pageTree: {
                    // 当前选中
                    activeSelect: {},
                    
                    // 树的数据 
                    treeData: [],

                    treeRule: {
                        
                    }
                },


                // dialog
                pageDialog: {
                    // 弹框状态
                    visible: false,
                    // 简易弹框录入，不支持事件
                    dialogFormProps: JSON.parse(JSON.stringify(dialogFormConfig)),

                    dialogRules: {
                        input_default: [
                            { required: true, message: '请输入名称', trigger: 'blur' }
                        ],
                        input_default3: [
                            { required: true, message: '请输入工作', trigger: 'blur' }
                        ],
                        date_default: [
                            { required: true, message: '请选择生日日期', trigger: 'change' }
                        ]
                    },
                    // 弹框参数
                    activeData: {}
                }
            }
        },
        computed: {

        },
        methods: {
            handleGetTableListByParams() {
                // 获取参数
                const params = this.$refs['tablesearchform'].handleCommitSearchPamras()
                // 获取树上的参数
                const { id } = this.pageTree.activeSelect
                // 合并分页参数或者其他参数
                const queryParams = Object.assign({}, params, { 
                    page: this.page, 
                    pagesize: this.pagesize, 
                    treeId: id 
                })
                console.log('[ 查询参数 queryParams]', queryParams)
                this.pageTable.tableData = getTableDataList(this.pageTable.fieldConfig, this.pagesize)
            },

            handleTableRowRemoveEvent(row) {
                console.log('handleTableRowRemoveEvent', row)
            },

            async handleAddEvent() {
                const $simpledialogform = this.$refs['simpledialogform']
                $simpledialogform.handleOperateDialog(null, false)
                const result = await $simpledialogform.waitForFormData
                if(!result.state) return
                console.log("handleAddEvent", result)
            },

            async handleTableRowAddEvent(row, type) {
                const $simpledialogform = this.$refs['simpledialogform']
                // $simpledialogform.handleOperateDialog(row, type)
                $simpledialogform.handleOperateDialog({
                    input_default: '名称',
                    inputnumber_default: 24,
                    input_default2: '华硕',
                    input_default3: '要饭',
                    select_default: '1',
                    date_default: moment().valueOf(),
                    checkboxgroup_default: ['1', '2'],
                    radiogroup_default: '1',
                    timerange_default: [
                        moment().subtract(7, 'day').valueOf(),
                        moment().valueOf()
                    ]
                }, type)
                // 同步等待表单数据返回
                const result = await $simpledialogform.waitForFormData
                if(!result.state) return
                console.log("handleTableRowAddEvent", result)
            },


            handlePageTreeClick(data, node) {
                this.pageTree.activeSelect = JSON.parse(JSON.stringify(data))
                console.log('handlePageTreeClick', data, node)
            },

            handlePageTreeCheck(data, node) {
                console.log('handlePageTreeCheck', data, node)
            },

            handlePageTreeMounted($tree, { firstNode }) {
                if(firstNode) {
                    this.$refs['elementTree'].setCurrentKey(firstNode)
                    this.$refs['elementTree'].handleClickEmit(firstNode)
                }
            }
        },
        beforeCreate() {

        },
        created() {

        },
        beforeMount() {

        },
        mounted() {
            // 模拟下
            this.total = 273
            this.handleGetTableListByParams()
        },
        beforeDestroy() {

        },
    }
</script>
<style lang="scss" scoped>

</style>